<template>
	<d-wrap :title="title">
		<div class='login' slot='body'>
			<div class='top'>
				<h1 class='logo pic-wrap'>
					<img src="/static/images/icon.png" alt="..." />
				</h1>

				<div class='info'>
					<p class='t'>逐浪小说App</p>
					<p class='st'>免费看小说，天天领金币</p>
					<i class='install'>立即安装</i>
				</div>
			</div>

			<div class='login-form'>
				<div class='line'>
					<Icon type="locked" class='icon'></Icon>
					<i-input v-model="params.username" placeholder="用户名" clearable ></i-input>
				</div>

				<div class='line'>
					<Icon type="person" class='icon'></Icon>
					<Input v-model="params.password" type="password" placeholder="密码" clearable ></Input>
					
				</div>
			</div>
			
			<div class='login-btn' @click="login">
				<i>登录</i>
			</div>

			<div class="login-text">
				<span class="left" @click="toRegister">立即注册</span>
				<span class="right">忘记密码</span>
			</div>

			<div class="auth-btn">
				<a href="#" class="fl sns-qq"></a>
				<a href="#" class="fr sns-wb"></a>
			</div>
			<Spin size="large" class='loading' fix v-if="loading"></Spin>
		</div>
	</d-wrap>
</template>

<script>
	import Cookies from 'js-cookie'
	import DWrap   from 'base/default-wrap'
 
	export default{
		components: {
			DWrap
		},
		data() {
			return {
				title		: '登陆',
				loading		: true,
				params		: {
					username: '13129614300',
					password: 'a1269886839'
				}
			}
		},
		created() {
			setTimeout(() => {
				this.topShow 	= true
				this.bottomShow = true
				this.loading 	= false
			}, 500)
		},
		methods: {
			login() {
				let params = this.params

				let usernameRule = /^[a-zA-Z0-9_-]{4,16}$/
				let passwordRule = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/
				if(!usernameRule.test(params.username)) {
					this.$Message.error('请输入格式正确的用户名')
					return
				}
				if(!passwordRule.test(params.password)){
					this.$Message.error('请输入格式正确的密码')
					return 
				}

				this.HttpService.stuLogin(params).then(data => {
					let d 						= data.data
					if(!data.status) {
						this.$Message.success(data.msg)
						this.$Message.success('2秒后跳转', 2)
		          		this.$store.commit('setUserInfo', d.userInfo)

						Cookies.set('token', data.data.token)
		          		localStorage.setItem('userInfo', d.userInfo)
		          		localStorage.setItem('token', d.token)

		          		setTimeout(() => {
							this.$router.back()
						}, 2000)

					} else {
						this.$Message.error(data.msg)
					}
				})
			},
			getConfig() {
		      this.HttpService.getGlobalConfig().then(data => {
		        if (data) {
		          this.config = data.config
		          // this.$store.commit('setTicketCount', data.config.num)
		        }
		      })
		    },
		    getUserInfo() {
		      if (this.util.getStorageSync('session'))
		        this.HttpService.signIn()
		    },
		    toRegister() {
		    	this.$router.push('/register')
		    },
		    onEnter() {
				console.log('enter')
			},
			skip(item, index) {
				this.activeTab = index
			}
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/login.styl"
</style>